<template>
  <div class="bg full-screen-height full-screen-width ofy-auto ofx-hidden min-width">
    <div class="full-width position-relative">
      <div class="top-left-imgs">
        <img class="mr-10" width="77" height="52" src="../assets/img/indicators/1.png" alt="">
        <img width="77" height="52" src="../assets/img/indicators/2.png" alt="">
        <img width="77" height="52" src="../assets/img/indicators/3.png" alt="">
      </div>
      <div class="top-right-imgs">
        <img width="52" height="52" src="../assets/img/indicators/xiongtong.png" alt="">
      </div>
      <div class="full-width d-flex">
        <div class="flex-full left-top"></div>
        <div class="left-triangle"></div>
        <div class="text-linear-gradient font-weight-bold text-42 mx-2 mt-25 title-text">
          中国胸痛中心质控指标查询
        </div>
        <div class="right-triangle"></div>
        <div class="flex-full left-right"></div>
      </div>
      <div class="full-width d-flex">
        <div class="flex-full left-top-line"></div>
        <div class="left-top-rate-line"></div>
        <div class="top-bottom-line" style="margin-top: 39px"></div>
        <div class="right-top-rate-line"></div>
        <div class="flex-full right-top-line"></div>
      </div>
    </div>
    <div class="mt-15">
      <div class="mt-20 mx-auto" style="width:80%">
        <div class="d-flex justify-content-between">
          <div class="d-flex align-items-center">
            <div class="text-20 color-blue mr-5">
              <img class="mr-11" width="14" height="21"
                   src="../assets/img/indicators/location.png" alt="">
              地区：
            </div>
            <div style="margin-right: 118px" class="flex-full d-flex justify-content-around">
              <el-select v-model="province" filterable @change="getCity"
                         class="no-inner-border width-13 border-bottom border-blue mr-15 color-light-blue">
                <el-option v-for="(item,i) in provinces" :key="i" :label="item.name" :value="item.name"></el-option>
              </el-select>
              <el-select v-model="city" filterable @change="getHospitalByCondition"
                         class="no-inner-border width-13 border-bottom border-blue mr-15 color-light-blue">
                <el-option v-for="(item,i) in citys" :key="i" :label="item.name" :value="item.name"></el-option>
              </el-select>
              <el-select v-model="hospital" filterable class="flex-full no-inner-border border-bottom border-blue color-light-blue">
                <el-option v-for="(item,i) in hospitals" :key="i" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </div>
            <div class="d-flex align-items-center mr-20">
              <div class="text-20 color-blue mr-5">
                <img class="mr-11" width="21" height="21"
                     src="../assets/img/indicators/time.png" alt="">
                时间：
              </div>
              <div class="d-flex align-items-center border-bottom border-blue">
                <span class="text-20 color-blue">{{startTime?startTime:'请选择'}}</span>
                <div class="">
                  <el-date-picker
                    class="width-4 cursor-pointer no-inner-border color-light-blue"
                    v-model="startTime"
                    type="month"
                    :clearable="false"
                    value-format="yyyy-MM"
                    prefix-icon="el-icon-arrow-down">
                  </el-date-picker>
                </div>
              </div>
            </div>
            <div class="d-flex align-items-center">
              <div class="color-blue text-20 mr-10">至</div>
              <div class="d-flex align-items-center border-bottom border-blue">
                <span class="color-blue text-20">{{endTime?endTime:'请选择'}}</span>
                <div class="">
                  <el-date-picker
                    class="width-4 cursor-pointer no-inner-border color-light-blue"
                    v-model="endTime"
                    type="month"
                    :clearable="false"
                    value-format="yyyy-MM"
                    prefix-icon="el-icon-arrow-down">
                  </el-date-picker>
                </div>
              </div>
            </div>
          </div>
          <div class="d-flex">
            <el-button class="btn shadow-lg" round @click="search">确 认</el-button>
          </div>
        </div>
      </div>
      <div class="line mt-10"></div>
      <div class="mx-auto" style="width:80%">
        <div class="mt-17 font-weight-bold">
          <div class="d-flex align-items-center">
            <span style="color: #FFA800" class="text-20 mr-15">建设进度：</span>
            <span style="color: #00C1FF" class="text-16">通过认证</span>
          </div>
          <div class="mt-5 d-flex align-items-center">
            <span style="color: #FFA800" class="text-20 mr-15">认证类型：</span>
            <span style="color: #00C1FF;" class="text-16">标准版</span>
            <span style="color: #00C1FF;" class="text-16">（全国共</span>
            <span style="color: #A5E0FF;" class="text-30 mx-4">{{totalHospital?totalHospital:'-'}}</span>
            <span style="color: #00C1FF;" class="text-16">家；本省共</span>
            <span style="color: #A5E0FF;" class="text-30 mx-4">{{provinceHospital?provinceHospital:'-'}}</span>
            <span style="color: #00C1FF;" class="text-16">家）</span>
          </div>
        </div>
        <div class="mt-15">
          <el-row :gutter="80">
            <el-col v-for="(item,i) in chartData" :key="i" :span="12">
              <div class="d-flex justify-content-center border-inf py-13 mb-30">
                <div class="text-center full-width">
                  <div class="text-24 title-color font-shadow">
                    {{item.title}}
                  </div>
                  <div class="mt-10">
                    <div style="width: 90%" class="height-30 mx-auto">
                      <chart :options="item.data" ref="chart" :auto-resize="true"
                             class="full-width full-height"></chart>
                    </div>
                  </div>
                  <!--<div class="mt-10 d-flex justify-content-around">-->
                    <!--<div class="text-22">-->
                      <!--<span style="color: white" class="font-weight-bold">全国排名：</span>-->
                      <!--<span style="color: white" class="font-weight-bold">{{item.nationalRank}}</span>-->
                    <!--</div>-->
                    <!--<div class="text-22">-->
                      <!--<span style="color: white" class="font-weight-bold">省排名：</span>-->
                      <!--<span style="color: white" class="font-weight-bold">{{item.provinceRank}}</span>-->
                    <!--</div>-->
                  <!--</div>-->
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import echarts from 'echarts'
import _ from 'lodash'
import { getAllProvince, getHospital, getCityByProvince, getChartData, getChartData2 } from '../../src/api/indicators/index'

export default {
  name: 'indicators',
  data () {
    return {
      totalHospital: 0,
      provinceHospital: 0,
      startTime: '2017-01',
      endTime: '2018-12',
      province: '',
      city: '',
      hospital: '',
      chartData: [],
      provinces: [],
      citys: [],
      hospitals: [],
      cores: [
        { val: 'S2FMC',
          title: 'STEMI患者症状到首次医疗接触（S2FMC）时间',
          yAxisName: '分钟'
        },
        { val: 'FMC2ECG',
          title: '首次医疗接触至首份心电图（FMC2ECG）时间',
          yAxisName: '分钟'
        },
        { val: 'ECGREMOTE',
          title: 'ECG远程传输比例',
          yAxisName: '百分比'
        },
        { val: 'FMC2B',
          title: '首次医疗接触到导丝通过(或球囊扩张)时间',
          yAxisName: '分钟'
        },
        { val: 'FMC2DAPT',
          title: 'STEMI患者首次医疗接触至双重抗血小板治疗时间',
          yAxisName: '分钟'
        },
        { val: 'CONDUIT',
          title: '直达导管室比率',
          yAxisName: '百分比'
        },
        { val: 'DIDO',
          title: '非PCI医院停留时间（DIDO）',
          yAxisName: '分钟'
        },
        { val: 'D2B',
          title: 'D2B时间',
          yAxisName: '分钟'
        },
        {
          val: 'B520',
          title: '再灌注比例',
          yAxisName: '百分比'
        },
        {
          val: 'STATINS',
          title: 'ACS患者24小时强化他汀治疗比例',
          yAxisName: '百分比'
        },
        {
          val: 'DEATH',
          title: '院内死亡率',
          yAxisName: '百分比'
        },
        {
          val: 'DRUG',
          title: '出院带药符合指南推荐',
          yAxisName: '百分比'
        },
        {
          val: 'ByMeet',
          title: '胸痛中心三会：须上传会议记录和照片',
          yAxisName: '次',
          type: 2
        },
        {
          val: 'ReportByMonth',
          title: '数据填报量',
          yAxisName: '例',
          type: 2
        },
        {
          val: 'PCI',
          title: '急症PCI例数',
          yAxisName: '例'
        }
      ]
    }
  },
  methods: {
    init () {
      document.getElementsByClassName('top-bottom-line')[0].style.width = this.textWidth + 'px'
      this.getProvince()
    },
    search () {
      if (!this.province || !this.city || !this.hospital) {
        this.$alert('请完善搜索信息', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.totalHospital = 0
      this.provinceHospital = 0
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      let requests = []
      let self = this
      this.cores.forEach(item => {
        if (item.type === 2) {
          let postData = {
            SessionKey: '75419BABA30E08B49A454DE9ED99F133',
            Type: item.val,
            StarTime: self.startTime + '-01',
            EndTime: this.endTime + '-' + new Date(new Date(new Date(self.endTime).getFullYear(), new Date(self.endTime).getMonth() + 1, 0)).getDate(),
            hospitalName: self.hospital
          }
          requests.push(getChartData2('/Api/CalQuality/GetEnumerable', postData))
        } else {
          let postData = {
            core: item.val,
            start: this.startTime,
            end: this.endTime,
            hospital: this.hospital,
            city: this.city,
            province: this.province
          }
          requests.push(getChartData('/datav/core_ajax', postData))
        }
      })
      this.chartData = []
      axios.all(requests)
        .then(res => {
          res.forEach((item, i) => {
            if (item.status === 200) {
              if (this.cores[i].type === 2) {
                let xAxisData = []
                let seriesData = []
                if (item.data.Data && item.data.Data.length > 0) {
                  let operteData = item.data.Data
                  if (operteData.length > 12) {
                    let unit = parseInt(operteData.length / 12) + 1
                    operteData = []
                    item.data.Data.forEach((item, i) => {
                      if (i % unit === 0) {
                        operteData.push(item)
                      }
                    })
                  }
                  operteData.forEach(item => {
                    xAxisData.push(item.DATEM)
                    seriesData.push(item.CNT)
                  })
                }
                let obj = {
                  title: (i + 1) + '.' + this.cores[i].title,
                  nationalRank: 32,
                  provinceRank: 3,
                  data: {
                    legend: {
                      type: 'plain',
                      orient: 'horizontal',
                      bottom: 0,
                      textStyle: {
                        color: 'white',
                        fontSize: 14
                      },
                      data: ['数量']
                    },
                    grid: {
                      bottom: 80
                    },
                    xAxis: {
                      type: 'category',
                      axisLine: {
                        lineStyle: {
                          color: 'transparent'
                        }
                      },
                      axisTick: {
                        lineStyle: {
                          color: 'transparent'
                        }
                      },
                      axisLabel: {
                        show: true,
                        interval: 0,
                        textStyle: {
                          fontSize: 14,
                          color: '#80a9c3'
                        },
                        rotate: 45,
                        padding: [10, 0, 0, 0]
                      },
                      data: xAxisData
                    },
                    yAxis: [
                      {
                        type: 'value',
                        min: 0,
                        max: seriesData.length > 0 ? parseInt(_.max(seriesData)) + 10 : 10,
                        name: this.cores[i].yAxisName,
                        nameTextStyle: {
                          color: '#80a9c3',
                          fontSize: 12
                        },
                        axisLine: {
                          lineStyle: {
                            color: 'transparent'
                          }
                        },
                        axisTick: {
                          alignWithLabel: true,
                          lineStyle: {
                            color: 'transparent'
                          }
                        },
                        splitLine: {
                          show: true,
                          lineStyle: {
                            color: '#0c3e66'
                          }
                        },
                        axisLabel: {
                          color: '#80a9c3',
                          fontSize: 12
                        }
                      }
                    ],
                    series: [
                      {
                        name: '数量',
                        data: seriesData,
                        type: 'bar',
                        barWidth: 30,
                        itemStyle: {
                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                              offset: 0,
                              color: '#ccd0e9'
                            },
                            {
                              offset: 1,
                              color: '#767eae'
                            }
                          ])
                        }
                      }
                    ]
                  }
                }
                this.chartData.push(obj)
              } else {
                if (!this.totalHospital) {
                  this.totalHospital = item.data.total_hospital
                }
                if (!this.provinceHospital) {
                  this.provinceHospital = item.data.province_hospital
                }
                let obj = {
                  title: (i + 1) + '.' + this.cores[i].title,
                  nationalRank: 32,
                  provinceRank: 3,
                  data: {
                    legend: {
                      type: 'plain',
                      orient: 'horizontal',
                      bottom: 0,
                      textStyle: {
                        color: 'white',
                        fontSize: 14
                      },
                      data: ['平均值', '参考标准', '符合率']
                    },
                    grid: {
                      bottom: 80
                    },
                    xAxis: {
                      type: 'category',
                      axisLine: {
                        lineStyle: {
                          color: 'transparent'
                        }
                      },
                      axisTick: {
                        lineStyle: {
                          color: 'transparent'
                        }
                      },
                      axisLabel: {
                        show: true,
                        interval: 0,
                        textStyle: {
                          fontSize: 14,
                          color: '#80a9c3'
                        },
                        rotate: 45,
                        padding: [10, 0, 0, 0]
                      },
                      data: item.data.x
                    },
                    yAxis: [
                      {
                        type: 'value',
                        min: 0,
                        max: this.cores[i].yAxisName === '百分比' ? 100 : parseInt(_.max([_.max(item.data.left), item.data.line && item.data.line.length > 0 ? item.data.line[0] : 0])) + 10,
                        name: this.cores[i].yAxisName,
                        nameTextStyle: {
                          color: '#80a9c3',
                          fontSize: 12
                        },
                        axisLine: {
                          lineStyle: {
                            color: 'transparent'
                          }
                        },
                        axisTick: {
                          alignWithLabel: true,
                          lineStyle: {
                            color: 'transparent'
                          }
                        },
                        splitLine: {
                          show: false
                        },
                        axisLabel: {
                          color: '#80a9c3',
                          fontSize: 12
                        }
                      },
                      {
                        type: 'value',
                        min: 0,
                        max: 100,
                        splitNumber: 10,
                        name: '百分比',
                        nameTextStyle: {
                          color: '#80a9c3',
                          fontSize: 12
                        },
                        axisLine: {
                          lineStyle: {
                            color: 'transparent'
                          }
                        },
                        axisTick: {
                          alignWithLabel: true,
                          lineStyle: {
                            color: 'transparent'
                          }
                        },
                        splitLine: {
                          show: true,
                          lineStyle: {
                            color: '#0c3e66'
                          }
                        },
                        axisLabel: {
                          color: '#80a9c3',
                          fontSize: 12
                        }
                      }
                    ],
                    series: [
                      {
                        name: '符合率',
                        type: 'line',
                        yAxisIndex: 1,
                        data: item.data.right,
                        symbol: 'circle',
                        itemStyle: {
                          color: '#97ccac'
                        }
                      },
                      {
                        name: '参考标准',
                        type: 'line',
                        yAxisIndex: item.data.direct === 'left' ? 0 : 1,
                        data: item.data.line,
                        symbol: 'none',
                        symbolSize: 0,
                        itemStyle: {
                          color: '#7368e8'
                        }
                      },
                      {
                        name: '平均值',
                        data: item.data.left,
                        type: 'bar',
                        barWidth: 30,
                        itemStyle: {
                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                              offset: 0,
                              color: '#ccd0e9'
                            },
                            {
                              offset: 1,
                              color: '#767eae'
                            }
                          ])
                        }
                      }
                    ]
                  }
                }
                this.chartData.push(obj)
              }
            }
          })
        })
        .finally(() => {
          loading.close()
        })
    },
    getProvince () {
      getAllProvince('/datav/province_ajax')
        .then(res => {
          if (res.status === 200 && res.data && res.data.length > 0) {
            res.data.forEach(item => {
              let obj = {
                name: item.PROVINCE,
                val: item._id ? item._id.$id : null
              }
              this.provinces.push(obj)
            })
          }
        })
    },
    getCity (val) {
      this.citys = []
      this.hospitals = []
      this.city = ''
      this.hospital = ''
      let postData = {
        province: val
      }
      getCityByProvince('/datav/city_ajax', postData)

        .then(res => {
          if (res.status === 200 && res.data && res.data.length > 0) {
            res.data.forEach(item => {
              let obj = {
                name: item._id
              }
              this.citys.push(obj)
            })
          }
        })
    },
    getHospitalByCondition (val) {
      if (val) {
        this.hospitals = []
        this.hospital = ''
        let postData = { city: val }
        getHospital('/datav/hospital_ajax', postData)
          .then(res => {
            if (res.status === 200 && res.data && res.data.length > 0) {
              res.data.forEach(item => {
                let obj = {
                  name: item._id
                }
                this.hospitals.push(obj)
              })
            }
          })
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  },
  computed: {
    textWidth () {
      return document.getElementsByClassName('title-text')[0].clientWidth + 4
    }
  }
}
</script>
<style lang="scss" scoped>
  .top-left-imgs{
    position: absolute;
    top: 0;
    left: 25px;
  }

  .top-right-imgs{
    position: absolute;
    top: 0;
    right: 25px;
  }

  .left-top {
    background: linear-gradient(to right, transparent, #1A85D1);
    height: 52px;
  }

  .left-triangle {
    width: 0;
    height: 0;
    border: 26px solid transparent;
    border-left: 26px solid #1A85D1;
    border-top: 26px solid #1A85D1;
  }

  .left-right {
    background: linear-gradient(to left, transparent, #1A85D1);
    height: 52px;
  }

  .right-triangle {
    width: 0;
    height: 0;
    border: 26px solid transparent;
    border-right: 26px solid #1A85D1;
    border-top: 26px solid #1A85D1;
  }

  .left-top-line {
    background: linear-gradient(to right, transparent, white);
    height: 1px;
    opacity: 0.4;
  }

  .right-top-line {
    background: linear-gradient(to left, transparent, white);
    height: 1px;
    opacity: 0.4;
  }

  .left-top-rate-line {
    position: relative;
    width: 40px;
    height: 52px;
    box-sizing: border-box;
  }

  .left-top-rate-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    transform-origin: bottom center;
    transform: rotateZ(45deg) scale(1.414);
  }

  .right-top-rate-line {
    position: relative;
    width: 40px;
    height: 52px;
    box-sizing: border-box;
  }

  .right-top-rate-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    transform-origin: bottom center;
    transform: rotateZ(-45deg) scale(1.414);
  }

  .top-bottom-line {
    height: 1px;
    background: white;
    opacity: 0.4;
  }

  .btn {
    font-family: 'MicrosoftYaHei-Bold';
    width: 112px;
    height: 40px;
    line-height: 12px;
    font-size: 20px;
    background: rgba(30, 39, 66, 1);
    border: 1px solid rgba(177, 232, 255, 1);
    border-radius: 20px;
    color: #00C1FF;
    font-weight: bold;
  }

  .line {
    width: 100vw;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
  }

  .border-inf {
    border: 1px solid;
    border-image: radial-gradient(circle, rgba(24, 127, 255, 1), rgba(40, 79, 169, 1), rgba(217, 223, 255, 1), rgba(43, 47, 168, 1)) 1 1;
    border-radius: 15px;
  }

  .title-color {
    color: #5E94FF;
  }

  .bdr {
    border-radius: 20px;
  }

  .font-shadow {
    text-shadow: 0 0 35px #5E94FF;
  }

  .shadow-lg {
    box-shadow: 0 0 15px white inset;
  }

  .shadow-sm {
    box-shadow: 0 0 5px white inset;
  }

  .bg {
    background: url("../assets/img/indicators/bg.png");
    background-size:100% 100%;
    background-repeat:no-repeat;
  }

  .color-blue {
    color: #B1E8FF;
  }

  .text-linear-gradient {
    background: linear-gradient(to top, #1A85D1, #C2DFF3);
    -webkit-background-clip: text;
    color: transparent;
  }

  .text-underline {
    text-decoration: underline;
  }

  .el-input__inner {
    font-size: 28px !important;
  }

  .logo-xiongtong {
    position: absolute;
    right: 34px;
    top: 0px;
  }

  .imgs-container {
    position: absolute;
    left: 90px;
  }
</style>
